<template>
	<view>
		<!-- 弹出层 -->
		<uni-popup type="bottom" ref="popup" :maskClick="false" @onReply="reply">
			<view class="popup-wrapper">
				<view class="popup-header">
					<text class="popup-header__item" @click="popupClose">取消</text>
					<text class="popup-header__item" @click="submitComment">发布</text>
				</view>
				<view class="popup-content">
					<textarea class="popup-textarea" v-model="commentsVal" placeholder="请输入评论内容" fixed maxlength="200" />
					<view class="popup-count">{{commentsVal.length}}/200</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {update_comment} from '@/common/api/index.js'
	export default {
		data() {
			return {
				// 评论内容的值
				commentsVal: '',
				// 评论信息数据数组
				commentsList: [],
				// 回复评论相关信息对象
				replyFormData: {}
			}
		},
		methods: {
			// 评论请求
			setUpdateComment() {
				update_comment({
					article_id: this.formData._id,  //文章id
					content: this.commentsVal  ,//评论内容
					comment_id: this.replyFormData.comment_id ,//评论id
					replay_id: this.replyFormData.replay_id, //子回复id
					is_reply: this.replyFormData.is_reply //是否子回复
				})
				.then(res => {
					console.log('评论：',res)
					uni.showToast({
						title: '评论成功！'
					})
					// 刷新评论
					this.getComments()
					// 清空文本域
					this.commentsVal = ''
					// 清空
					this.replyFormData = {}
					// 关闭popup
					this.popupClose()
				})
				.catch(err => {
					uni.showToast({
						title: '评论失败：' + err,
						icon: 'none'
					})
				})
			},
			// 打开评论框
			openComment() {
				this.$refs.popup.open()
			},
			// 关闭评论框
			popupClose() {
				// 关闭popup
				this.$refs.popup.close()
			},
			// 提交评论
			submitComment() {
				if(!this.commentsVal) return uni.showToast({
					title: '请输入评论内容',
					icon: 'none'
				})
				console.log('发布')
				// 调用评论函数
				this.setUpdateComment()
			},
			// 回复评论
			reply(e) {
				// this.replyFormData = {
				// 	comment_id: e.comments.comment_id,
				// 	is_reply: e.is_reply
				// }
				// if(e.comments.replay_id) {
				// 	this.replyFormData.replay_id = e.comments.replay_id
				// }
				// 打开popup
				this.openComment()
			}
		}
	}
</script>

<style lang="scss">
	
	.popup-wrapper{
		background-color: #fff;
		.popup-header{
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			color: #666;
			border-bottom: 1px solid #F5F5F5;
			.popup-header__item{
				height: 100upx;
				line-height: 100upx;
				padding: 0 30upx;
			}
		}
		.popup-content{
			width: 100%;
			padding: 30upx;
			box-sizing: border-box;
			.popup-textarea{
				width: 100%;
				height: 400upx;
			}
			.popup-count{
				display: flex;
				justify-content: flex-end;
				font-size: 24upx;
				color: #999;
			}
		}
	}
</style>
